<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
     <script type="importmap">
      {
        "imports": {
          "three": "./threejs/build/three.module.js",
          "three/addons/": "./threejs/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
      import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
      import { RenderPass } from "three/addons/postprocessing/RenderPass.js";

      class ScreenMaskPass extends ShaderPass {
        constructor() {
          super({
            name: "ScreenMaskShader",

            uniforms: {
              tDiffuse: { value: null },
              opacity: { value: 1.0 },
              intensity: { value: 2.0 },
              maskColor: { value: new THREE.Color(1, 1, 1) },
              R: { value: 0.1 },
              sr: { value: 1.2 },
            },

            vertexShader: `
                varying vec2 vUv;
                void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                }
            `,

            fragmentShader: `
                uniform float opacity;
                uniform float intensity;
                uniform sampler2D tDiffuse;
                uniform vec3 maskColor;
                uniform float R;
                uniform float sr;
                varying vec2 vUv;
                void main() {
                // 阴影颜色
                vec4 texel = texture2D( tDiffuse, vUv );
                // 距离中心的距离
                float dist = sqrt((vUv.x-0.5)*(vUv.x-0.5)+(vUv.y-0.5)*(vUv.y-0.5));
                // 渐变, sr 是开始黑色参数
                float rr = (sr - smoothstep(R, R + 0.5, dist));
                // 叠加黑色
                texel *= vec4(maskColor * rr * vec3(intensity,intensity,intensity), 1.0);
                gl_FragColor = opacity * texel;
                }
            `,
          });
        }
      }

      

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.set(0, 2, 8);

      const renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      new OrbitControls(camera, renderer.domElement);

      const composer = new EffectComposer(renderer);

      const renderPass = new RenderPass(scene, camera);

      composer.addPass(renderPass);

      const screenMaskPass = new ScreenMaskPass();

      composer.addPass(screenMaskPass);

      scene.add(new THREE.AxesHelper(500), new THREE.GridHelper(500, 50));

      animate();

      function animate() {
        requestAnimationFrame(animate);

        composer.render();
      }

      window.onresize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      };

      // 文件地址
      const urls = [0, 1, 2, 3, 4, 5].map(
        (k) =>
          "https://z2586300277.github.io/three-editor/dist/files/scene/skyBox0/" +
          (k + 1) +
          ".png"
      );

      const textureCube = new THREE.CubeTextureLoader().load(urls);

      scene.background = textureCube;
    </script>
  </body>
</html>
